import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import totaldata from "@province-city-china/level";

const SelectCity = (props) => {
  const [provinceData, setProvinceData] = useState([]);
  const [cityData, setCityData] = useState([]);
  const [areaData, setAreaData] = useState([]);
  const [province, setProvince] = useState(props.provincekey);
  const [city, setCity] = useState(props.citykey);
  const [area, setArea] = useState(props.areakey);
  const [ispFocus, setIspFocus] = useState(false);
  const [iscFocus, setIscFocus] = useState(false);
  const [isaFocus, setIsaFocus] = useState(false);
  const [addr, setAddr] = useState(props.address);

  useEffect(() => {
    var count = Object.keys(totaldata).length;
    let provinceArray = [];
    for (var i = 0; i < count; i++) {
      provinceArray.push({
        value: totaldata[i].code,
        label: totaldata[i].name,
      });
    }
    setProvinceData(provinceArray);
    if (province == undefined || province === "") {
      console.log("无默认省");
    } else {
      handeleCity(province);
    }
    if (city == undefined || city === "") {
      console.log("无默认市");
    } else {
      handeleArea(province, city);
    }
  }, []);

  const handeleCity = (provinceCode) => {
    let cityArray = [];
    const currentProvince = totaldata.filter(
      (item) => item.code == provinceCode
    );
    var citycount = Object.keys(currentProvince[0].children).length;
    for (var j = 0; j < citycount; j++) {
      cityArray.push({
        value: currentProvince[0].children[j].code,
        label: currentProvince[0].children[j].name,
      });
    }
    setCityData(cityArray);
  };

  const handeleArea = (provinceCode, cityCode) => {
    let areaArray = [];
    const currentProvince = totaldata.filter(
      (item) => item.code == provinceCode
    );
    const currentCity = currentProvince[0].children.filter(
      (item) => item.code == cityCode
    );
    var areacount = currentCity[0].children
      ? Object.keys(currentCity[0].children).length
      : 0;
    if (areacount != 0) {
      for (var k = 0; k < areacount; k++) {
        areaArray.push({
          value: currentCity[0].children[k].code,
          label: currentCity[0].children[k].name,
        });
      }
    } else {
      areaArray.push({
        value: 0,
        label: "暂无数据",
      });
    }
    setAreaData(areaArray);
  };

  return (
    <View
      style={{
        backgroundColor: "#fff",
        padding: 10,
        borderRadius: 15,
        marginTop: 13,
      }}
    >
      <Dropdown
        style={[styles.dropdown, ispFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={provinceData}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder={!ispFocus ? "请选择省" : "..."}
        searchPlaceholder="Search..."
        value={province}
        onFocus={() => setIspFocus(true)}
        onBlur={() => setIspFocus(false)}
        onChange={(item) => {
          setProvince(item.value);
          handeleCity(item.value);
          setArea(null);
          setIspFocus(false);
          props.handleProvince(item.value, item.label);
        }}
      />
      <Dropdown
        style={[styles.dropdown, iscFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={cityData}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder={!iscFocus ? "请选择市" : "..."}
        searchPlaceholder="Search..."
        value={city}
        onFocus={() => setIscFocus(true)}
        onBlur={() => setIscFocus(false)}
        onChange={(item) => {
          setCity(item.value);
          handeleArea(province, item.value);
          setIscFocus(false);
          props.handleCity(item.value, item.label);
        }}
      />
      <Dropdown
        style={[styles.dropdown, isaFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={areaData}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder={!isaFocus ? "请选择区" : "..."}
        searchPlaceholder="Search..."
        value={area}
        onFocus={() => setIsaFocus(true)}
        onBlur={() => setIsaFocus(false)}
        onChange={(item) => {
          setArea(item.value);
          setIsaFocus(false);
          props.handleArea(item.value, item.label);
        }}
      />

      <TextInput
        placeholder="请输入详细地址"
        placeholderTextColor="#000000"
        multiline={true}
        value={addr}
        style={[
          styles.dropdown,
          {
            fontSize: 16,
            textAlign: "left",
            includeFontPadding: false,
            textAlignVertical: "center",
          },
        ]}
        onChangeText={(text) => {
          setAddr(text);
          props.handleAddress(text);
        }}
      ></TextInput>
    </View>
  );
};

export default SelectCity;

const styles = StyleSheet.create({
  dropdown: {
    height: 55,
    borderColor: "gray",
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 10,
    marginBottom: 25,
  },
  icon: {
    marginRight: 5,
  },
  label: {
    position: "absolute",
    backgroundColor: "white",
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  subtitle: {
    fontSize: 16,
  },
});
